let layer=layui.layer

//  1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项

// 1.3 创建裁剪区域
$image.cropper({
    aspectRatio: 1,

    // 指定预览区域
     preview: '.preview'
});

$('#btnChooseImage').click(function(){

 $('#file').click()
})
// 给文件域注册change事件
$('#file').on('change',function () {
    let file=this.files[0]
    if (!file) {
        return layer.msg("请选择文件")
        
    }
    const newImgSrc = URL.createObjectURL(file)
    $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newImgSrc)  // 重新设置图片路径
   .cropper({ aspectRatio: 1,

    // 指定预览区域
     preview: '.preview'})        // 重新初始化裁剪区域
})
// 上传新头像
$('#btnCreateAvatar').on('click',function () {
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串

    console.log(dataURL);
   axios.post("/my/update/avatar", "avatar=" + encodeURIComponent(dataURL)).then(({data})=>{
   
    if (data.status!==0) {
        return layer.msg(data.message)
    }
    layer.msg(data.message)
    window.parent.getUserInfo()
    window.parent.getUserInfo
   })
})